<template>
  <!-- 规格弹窗 -->
  <su-popup
    :show="authType !== ''"
    round="50"
    :showClose="true"
    @close="closeAuthModal"
  >
    <view class="login-wrap">
      <!-- 1. 账号密码登录 accountLogin -->
      <account-login
        v-if="authType === 'accountLogin'"
        :agreeStatus="state.protocol"
        :radioShow="props.radioShow"
      ></account-login>

      <!-- 2.短信登录  smsLogin -->
      <sms-login
        v-if="authType === 'smsLogin'"
        :agreeStatus="state.protocol"
        :radioShow="props.radioShow"
      ></sms-login>
      <!-- 3.短信注册 smsRegister-->
      <sms-register
        v-if="authType === 'smsRegister'"
        :agreeStatus="state.protocol"
      ></sms-register>

      <!-- 4.忘记密码 resetPassword-->
      <reset-password v-if="authType === 'resetPassword'"></reset-password>

      <!-- 5.绑定手机号 changeMobile -->
      <change-mobile v-if="authType === 'changeMobile'"></change-mobile>

      <!-- 6.修改密码 changePassword-->
      <change-passwrod v-if="authType === 'changePassword'"></change-passwrod>

      <!-- 7.修改用户名 changeUsername-->
      <change-username v-if="authType === 'changeUsername'"></change-username>

       <!-- 8.修改昵称 changeUsername-->
       <change-nickname v-if="authType === 'changeNickname'"></change-nickname>
	   <!-- 9.忘记密码 resetPayPassword-->
	   <reset-pay-password v-if="authType === 'resetPayPassword'"></reset-pay-password>

      <!-- 第三方登录 -->
      <view
        v-if="['accountLogin', 'smsLogin'].includes(authType)"
        class="auto-login-box ss-flex ss-row-center ss-col-center"
      >
        <!-- 微信小程序登录 -->
        <!-- <button
          v-if="sheep.$platform.name === 'WechatMiniProgram'"
          open-type="getPhoneNumber"
          @getphonenumber="thirdLogin('wechat', $event)"
          class="ss-reset-button auto-login-btn"
        >
          <image
            class="auto-login-img"
            :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
          ></image>
        </button> -->
        <!-- 微信小程序(审核) 手机号登录 -->
        <button
          v-if="sheep.$platform.name === 'WechatMiniProgram'"
          open-type="getPhoneNumber"
          @getphonenumber="thirdLogin('wechat', $event)"
          class="ss-reset-button auto-login-btn"
        >
          <image
            class="auto-login-img"
            :src="sheep.$url.static('/static/img/shop/platform/phone.png')"
          >
          </image>
        </button>
        <!-- 公众号|App微信登录 -->
        <!-- #ifndef APP -->
        <button
          v-if="
            ['WechatOfficialAccount', 'App'].includes(sheep.$platform.name) &&
            sheep.$platform.isWechatInstalled &&
            !isWeChatBrowser()
          "
          @tap="thirdLogin('wechat')"
          class="ss-reset-button auto-login-btn"
        >
          <image
            class="auto-login-img"
            :src="sheep.$url.static('/static/img/shop/platform/wechat.png')"
          >
          </image>
        </button>
        <!-- #endif -->

        <!-- iOS登录 -->
        <!-- <button
          v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
          @tap="thirdLogin('apple')"
          class="ss-reset-button auto-login-btn"
        >
          <image
            class="auto-login-img"
            :src="sheep.$url.static('/static/img/shop/platform/apple.png')"
          >
          </image>
        </button> -->
      </view>

      <view
        v-if="['accountLogin', 'smsLogin', 'smsRegister'].includes(authType)"
        class="agreement-box ss-flex ss-row-center"
      >
        <label
          class="radio radio-label ss-flex ss-col-center"
          :class="[props.radioShow?'radio-sty':'']"
          @tap="onChange"
        >
          <radio
            :checked="state.protocol"
            color="var(--ui-BG-Main)"
            style="transform: scale(0.8)"
            @tap.stop="onChange"
            v-if="!props.radioShow"
          />
          <view
            class="custom-checkbox"
            v-else
            @tap.stop="onChange"
          >
            <!-- 自定义复选框 兼容社群时样式不生效问题 -->
            <view
              class="checkbox-box"
              :style="{
                    backgroundColor: state.protocol ? '#FF6000' : '#fff',  // 选中时背景色
                    borderColor: state.protocol ? '#FF6000' : '#ddd'
              }"
            >
              <!-- 勾选图标 -->
              <view
                class="checkmark"
                v-if="state.protocol"
              ></view>
            </view>
          </view>
          <view
            class="agreement-text ss-flex ss-col-center ss-m-l-8"
            :class="[props.radioShow ? 'flex-dir' : '']"
          >
            我已阅读并遵守
            <view
              class="tcp-text"
              @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)"
            >
              《{{ appInfo.user_protocol.title }}》
            </view>
            <view class="agreement-text">与</view>
            <view
              class="tcp-text"
              @tap.stop="onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)"
            >
              《{{ appInfo.privacy_protocol.title }}》
            </view>
          </view>
        </label>
      </view>
      <view class="safe-box"></view>
    </view>
  </su-popup>
</template>

<script setup>
import { computed, reactive,watch } from 'vue';
import sheep from '@/sheep';
import accountLogin from './components/account-login.vue';
import smsLogin from './components/sms-login.vue';
import smsRegister from './components/sms-register.vue';
import resetPassword from './components/reset-password.vue';
import resetPayPassword from './components/reset-pay-password.vue';
import changeMobile from './components/change-mobile.vue';
import changePasswrod from './components/change-password.vue';
import changeUsername from './components/change-username.vue';
import changeNickname from './components/change-nickname.vue';
import { closeAuthModal } from '@/sheep/hooks/useModal';
const emit = defineEmits(['loginEnd','loginGetStore']);
const appInfo = computed(() => sheep.$store('app').info);

const modalStore = sheep.$store('modal');
// 授权弹窗类型
const authType = computed(() => modalStore.auth);
const props = defineProps({
  radioShow: {
    type: [Boolean],
    default: false,
  },
  getStore:{
	  type: Boolean,
	  default: false,
  }
})
const state = reactive({
  protocol: false,
});
 watch(
    () => authType,
    (authType) => {
		if(state.protocol){
			state.protocol = !state.protocol
		}
    },
	{ deep: true },
  );
//判断在微信h5中
function isWeChatBrowser () {
  // #ifdef H5
  var userAgent = navigator.userAgent.toLowerCase();
  return /micromessenger/.test(userAgent);
  // #endif
  // #ifdef APP
  return false;
  // #endif
}

//勾选协议
function onChange () {


  state.protocol = !state.protocol;
  console.log('onChange', state.protocol);
}

// 查看协议
function onProtocol (id, title) {
  closeAuthModal();
  sheep.$router.go('/pages/public/richtext', {
    id,
    title,
  });
}

// 第三方授权登陆
const thirdLogin = async (provider, event = null) => {

  const invite_code = uni.getStorageSync('invite_code');

  // if (invite_code) {
  //   //绑定邀请码
  //   let res = await sheep.$api.tuangou.bind({ invite_code });
  //   if (res) {
  //     console.log(res);
  //     uni.removeStorageSync('invite_code');
  //   }
  // }

  if (!state.protocol) {
    sheep.$helper.toast('请勾选同意');
    return;
  }
  const loginRes = await sheep.$platform.useProvider(provider).login(event?.detail || null);
  if (loginRes) {
    closeAuthModal();
    const userInfo = await sheep.$store('user').getInfo();
	emit('loginEnd')
	if (props.getStore) {
		// emit(
		emit('loginGetStore')
	}
  }
};

</script>

<style lang="scss" scoped>
.radio-sty {
  flex-direction: row;
  width: 100%;
  justify-content: center;
}
/* 整体容器 */
.custom-checkbox {
  display: flex;
  align-items: center;
  padding: 10rpx;
}

/* 复选框盒子 */
.checkbox-box {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s;
}

/* 勾选图标（自定义形状） */
.checkmark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10rpx;
  height: 22rpx;
  border: solid white;
  border-width: 0 4rpx 4rpx 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* 点击反馈 */
.custom-checkbox:active {
  opacity: 0.7;
}
@import './index.scss';

.safe-box {
  height: calc(constant(safe-area-inset-bottom) / 5 * 3);
  height: calc(env(safe-area-inset-bottom) / 5 * 3);
}

.tcp-text {
  color: var(--ui-BG-Main);
}

.agreement-text {
  color: $dark-9;
}
.flex-dir {
  flex-direction: row;
  align-items: center;
}
// --ui-BG-Main: #ff6000;
//     --ui-BG-Main-tag: rgba(255, 96, 0, 0.05);
//     --ui-BG-Main-gradient: rgba(255, 96, 0, 0.6);
</style>
